/**
  Object: altbox
  A sample slideshow user interface built on top of Preso engine.
  
  Remarks:
    altbox is released into the public domain.
**/
var altbox = new Object();

/**
  Phrases that require locale translation.
**/
altbox.locale = {
  prev : 'previous [Left Arrow]',  
  next : 'next [Right Arrow]',
  home : 'home [Home]',  
  end  : 'end [End]',  
  off  : 'exit [Esc]',
  on   : 'preso!',
  bookmark : 'bookmark'
};

/**
  Handler to draw minbox and maxbox
**/
Preso.CtrlBox.drawCtrlBoxHandler = function (slides, minOrMax) {
  if (minOrMax == Preso.CtrlBox.MAX_BOX) {
    return altbox.drawMaxBox(slides);
  }
  else if (minOrMax == Preso.CtrlBox.MIN_BOX) {
    return altbox.drawMinBox(slides);
  }
  return '';
}

/** 
  Listener for 'slideChanged' event
**/
altbox.slideChangedListener = function (slideid, slides) {
  var jumplist = document.getElementById('jumplist');
  var curSlideNum = document.getElementById('curSlideNum');
  jumplist.value = slideid;
  curSlideNum.href = '#' + slideid;
  curSlideNum.title = altbox.locale.bookmark + ' #' + slideid;
  curSlideNum.innerHTML = slides[slideid].index + 1;
}

/**
  Navigation functions
**/
altbox.off = function () {
  Preso.turnOff();
  document.onkeydown = null;
}

altbox.on = function () {
  Preso.turnOn();
  document.onkeydown = altbox.keyDownHandler;
}

altbox.next = function() {
  Preso.next();
}

altbox.prev = function() {
  Preso.prev();
}

altbox.home = function() {
  Preso.home();
}

altbox.end = function() {
  Preso.end();
}

/**
  HTML code-generating functions
**/

/* maxbox HTML code */
altbox.drawMaxBox = function (slides) {
  var html = altbox.drawSlideInfo(slides) + 
	'<div id="nav">' +
  '<div id="navLinks">' +
  '<a id="navLinks-prev" title="' + 
    altbox.locale.prev + '" ' +
		'href="javascript:void altbox.prev();">&laquo;<\/a>' +
  '<a id="navLinks-next" title="' +
    altbox.locale.next + '" ' +
		'href="javascript:void altbox.next();">&raquo;<\/a>' +
  '<a id="navLinks-home" title="' +
    altbox.locale.home + '" ' +
		'href="javascript:void altbox.home();">Home<\/a>' +
  '<a id="navLinks-end" title="' +
    altbox.locale.end + '" ' +
		'href="javascript:void altbox.end();">End<\/a>' +
  '<a id="navLinks-off" title="' + 
    altbox.locale.off + '" ' +
		'href="javascript:void altbox.off();">&#216;<\/a>' +
  '<\/div>' +  altbox.drawJumpList(slides) +
	'<\/div>' +
  altbox.drawSlideNumberBox(slides);
  return html;
}

/* minbox HTML code */
altbox.drawMinBox = function (slides) {
  var html = '<a id="navLinks-on" title="' +
           altbox.locale.on + '" ' +
           'accesskey="S" ' + 
           'href="javascript:void altbox.on();">&#216;<\/a>';
  return html;
}

/* slideInfo HTML code in maxbox */
altbox.drawSlideInfo = function (slides) {
  var title = document.getElementsByTagName('title')[0];
  
  var html = '<div id="slideInfo">' +
  title.innerHTML.replace(/(<([^>]+)>)/ig,"") + '<\/div>';
  return html;
}

/* numberBox HTML code in maxbox */
altbox.drawSlideNumberBox = function (slides) {
  var total = slides.length;
  
  var html = '<div id="numBox">' +
  '<a id="curSlideNum" title="" href="#">0<\/a> / ' + total + '<\/div>';
  return html;
}

/* jumplist HTML code in maxbox  */
altbox.drawJumpList = function (slides) {
  var html = '<select id="jumplist" ' +
             'onchange="javascript:void altbox.gotoSlide(this.value);">';
  for(var i = 0; i < slides.length; i++) {
    var headline = altbox.getSlideLabel(slides[i]);
    var id = slides[i].id;
    html += '<option label="'+ headline + '" value="' + id +'">' + 
            (i+1) + ': ' + headline +
            '<\/option>';
  }
  html += '<\/select>';
  return html;
}

/**
  Misc. functions
**/

/* 
  retrieve a slide's headline label - adopted s5's slideLabel(). 
  used in <altbox.drawJumpList>
*/
altbox.getSlideLabel = function (slide) {
  var element = slide.firstChild;
  
  if (!element) {return '';}
  while (element && element.nodeType == 3) {
    element = element.nextSibling;
  }
  if (!element) {return '';}
  
  return element.innerHTML.replace(/(<([^>]+)>)/ig,""); 
}

/* called by the jumplist's onchange event */
altbox.gotoSlide = function (slideid) {
  Preso.gotoSlide(slideid);
}

/* capture keyboard shortcuts */
altbox.keyDownHandler = function (e) {
  if (!e) var e = window.event;
  
  var code;
  if (e.keyCode) {code = e.keyCode;}
  else if (e.which) {code = e.which;}
  else {return true;}

  if ( e.shiftKey || e.ctrlKey || e.altKey ) {return true;}
  
  switch(code) {
    case 27:  //ESC
      altbox.off();
      break;
  //case 13:  //enter
  //case 32:  //space bar
    case 34:  //page down
      Preso.next(true);
      break;
    case 39:  //right arrow
  //case 40:  //down arrow
      altbox.next();
      break;
    case 33:  //page up
      Preso.prev(true);
      break;
    case 37:  //left arrow
  //case 38:  //up arrow
      altbox.prev();
      break;
    case 36:  //home (Opera8.54 fails to detect <Home>? keycode = 0)
      altbox.home();
      break;
    case 35:  //end (Opera8.54 fails to detect <End>? keycode = 0)
      altbox.end();
      break;
    default:
      return true;
  }

  e.cancelBubble = true;
  if (e.stopPropagation) {e.stopPropagation();}

  e.returnValue = false;
  if (e.preventDefault) {e.preventDefault();} 
  return false;
}

/**
  Funtions to workaround IE fixed positioning layout issue.
**/
altbox.createIECondComment = function (textExp, contentString) {
  return '<!--[if ' + textExp + ']>' +
            contentString +
         '<![endif]-->';
}

altbox.loadIEFix = function () {
  var head = document.getElementsByTagName('head')[0];
  var links = new Array();
  
  links[0] = document.createElement('link');
  links[0].setAttribute('rel', 'stylesheet');
  links[0].setAttribute('type', 'text/css');
  links[0].setAttribute('href', altPreso.uiPath + 'altbox-ie6.css');
  
  links[1] = document.createElement('link');
  links[1].setAttribute('rel', 'stylesheet');
  links[1].setAttribute('type', 'text/css');
  links[1].setAttribute('href', altPreso.uiPath + 'altbox-ie6minbox.css');
  
  head.appendChild(links[0]);
  head.appendChild(links[1]);
  
  Preso.addEventListener("turnedOff", function () {links[0].disabled = true;});
  Preso.addEventListener("turnedOn", function () {links[0].disabled = false;});
}

/**
  activate Preso after the document is completely loaded.
**/
function init() {
  if (window.isLteIE6) {altbox.loadIEFix();}
  
  Preso.addEventListener('slideChanged', altbox.slideChangedListener);
  Preso.init();
  altbox.on();
}
window.onload = init;

/**
  a slightly clean way to detect IE
**/
document.write(
  altbox.createIECondComment('lte IE 6', 
  '<script language="javascript">window.isLteIE6 = true;<\/script>')
);